<template>
  <div class="goodsCard_box">
    <div class="section_nav">
      <span
        :class="{ active: currentIndex == index }"
        v-for="(item, index) in sectionType"
        :key="index"
        @click="changeIndex(index)"
        >{{ item }}</span
      >
    </div>
    <div class="book_main" v-show="showBookDetail == true">
      <div class="section_box">
        <div class="section_title">重磅推荐</div>
        <div class="section_img">
          <div
            class="section_item"
            v-for="(item, index) in sectionImg"
            :key="index"
          >
            <img :src="item" />
          </div>
        </div>
      </div>
      <div class="pro_trait">
        <div class="pro_trait_title">【产品特色】</div>
        <img :src="currentGoods[0].detailImg" alt="" />
      </div>
      <div class="title">
        <div class="aixin">
          <i class="iconfont icon-aixin1"></i>
        </div>
        您可能还喜欢
      </div>
      <ul>
        <li v-for="(item, index) in goodDetail[0].guessDetail" :key="index">
          <img :src="item.image_url" alt="" />
          <div class="cont">
            <div class="goodsName">
              {{ item.name }}
            </div>
            <div class="tag">
              <span v-if="item.productTags != ''">{{
                item.productTags[0].name
              }}</span>
            </div>
            <div class="price">￥{{ item.price }}</div>
          </div>
        </li>
      </ul>
    </div>
    <div class="published_information" v-show="showBookDetail == false">
      <ul>
        <li>
          <em>书名</em>
          <i>{{currentGoods[0].name}}</i>
        </li>
        <li>
          <em>ISBN</em>
          <i>9787020167197</i>
        </li>
        <li>
          <em>作者</em>
          <i>{{currentGoods[0].authorname}}</i>
        </li>
        <li>
          <em>出版社</em>
          <i>{{currentGoods[0].publisher}}</i>
        </li>
        <li>
          <em>出版时间</em>
          <i>{{currentGoods[0].publish_date}}</i>
        </li>
        <li>
          <em>开本</em>
          <i>32开</i>
        </li>
        <li>
          <em>纸张</em>
          <i>胶版纸</i>
        </li>
        <li>
          <em>包装</em>
          <i>精装</i>
        </li>
        <li>
          <em>否套装.</em>
          <i>否</i>
        </li>
      </ul>
      <footerLink />
    </div>
    <!-- http://img57.ddimg.cn/99999990275165547.jpg -->
  </div>
</template>

<script>
import footerLink from "../../components/base/footerLink.vue";
export default {
  components: {
    footerLink,
  },
  props: ["goodDetail","currentGoods"],
  data() {
    return {
      sectionType: ["图书详情", "出版信息"],
      sectionImg: [
        "https://img3m0.ddimg.cn/10/36/29297080-1_b_1.jpg",
        "https://img3m6.ddimg.cn/79/23/27943126-1_b_10.jpg",
        "https://img3m6.ddimg.cn/6/15/29303016-1_b_1.jpg",
        "https://img3m7.ddimg.cn/59/28/29276537-1_b_6342.jpg",
        "https://img3m4.ddimg.cn/39/32/29294634-1_b_10.jpg",
        "https://img3m0.ddimg.cn/83/2/29199440-1_b_22.jpg",
        "https://img3m1.ddimg.cn/60/31/29288121-1_b_46976.jpg",
        "https://img3m5.ddimg.cn/67/20/29139925-1_b_3.jpg",
        "https://img3m2.ddimg.cn/60/6/29288022-1_b_5.jpg",
      ],
      currentIndex: 0,
      showBookDetail: true,
    };
  },
  methods: {
    changeIndex(index) {
      this.currentIndex = index;
      this.currentIndex == 0
        ? (this.showBookDetail = true)
        : (this.showBookDetail = false);
    },
  },
};
</script>

<style lang="less" scoped>
.goodsCard_box {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 44px;
  left: 0;
  background-color: white;
  .section_nav {
    height: 40px;
    display: flex;
    align-items: center;
    background-color: white;
    span {
      flex: 0 0 50%;
      font-size: 13px;
      text-align: center;
      &.active {
        color: #ff8186;
      }
      &:nth-child(1) {
        border-right: 1px solid rgba(136, 136, 136, 0.3);
      }
    }
  }
  .book_main {
    width: 100%;
    background-color: white;
    .section_box {
      .section_title {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
        padding: 4px 0px;
        box-sizing: border-box;
        &::before {
          content: "";
          display: inline-block;
          width: 60px;
          height: 1px;
          background-color: rgba(136, 136, 136, 0.3);
          margin-right: 15px;
        }
        &::after {
          content: "";
          display: inline-block;
          width: 60px;
          height: 1px;
          background-color: rgba(136, 136, 136, 0.3);
          margin-left: 15px;
        }
      }
      .section_img {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        padding: 0px 20px;
        box-sizing: border-box;
        .section_item {
          flex: 0 0 30%;
          margin-top: 12px;
          img {
            width: 100%;
          }
        }
      }
    }
    .pro_trait {
      padding: 0px 20px;
      box-sizing: border-box;
      img {
        width: 100%;
      }
    }
    .title {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 13px 0px 10px;
      background-color: #f2f2f2;
      &::before {
        content: "";
        display: inline-block;
        width: 40px;
        height: 1px;
        background-color: rgba(136, 136, 136, 0.3);
        margin-right: 15px;
      }
      &::after {
        content: "";
        display: inline-block;
        width: 40px;
        height: 1px;
        background-color: rgba(136, 136, 136, 0.3);
        margin-left: 15px;
      }
      .aixin {
        width: 16px;
        height: 16px;
        line-height: 16px;
        border-radius: 8px;
        background-color: red;
        text-align: center;
        margin-right: 10px;
        i {
          display: inline-block;
          font-size: 12px;
          color: white;
          transform: scale(0.8, 0.8);
        }
      }
    }
    ul {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      background-color: white;
      li {
        width: 49%;
        img {
          width: 100%;
        }
        .cont {
          margin: 10px 10px 0;
          .goodsName {
            font-size: 13px;
            line-height: 18px;
            min-height: 36px;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
            text-overflow: ellipsis;
          }
          .price {
            display: block;
            float: left;
            color: #ff463c;
            font-size: 15px;
            line-height: 16px;
            margin-bottom: 8px;
          }
          .tag {
            height: 22px;
            margin: 2px 0px;
            span {
              display: inline-block;
              color: #fff;
              font-size: 12px;
              background-color: #fc5958;
              border-radius: 2px;
              border: 1px solid #fc5958;
              vertical-align: top;
              padding: 2px;
            }
          }
        }
      }
    }
  }
  .published_information {
    width: 100%;
    // height: 100%;
    position: absolute;
    top: 40px;
    left: 0;
    background-color: white;
    z-index: 9999;
    ul {
      width: 100%;
      padding: 0px 20px;
      box-sizing: border-box;
      overflow: hidden;
      margin-bottom: 40px;
      li {
        display: flex;
        margin-top: 10px;
        em {
          flex: 0 0 25%;
          font-style: normal;
          font-size: 14px;
        }
        i {
          flex: 1;
          font-style: normal;
          font-size: 14px;
        }
      }
    }
  }
}
</style>